import React, {  useState } from 'react';
import { Typography, Button, Popconfirm, message, Input } from 'antd';

import { ToDuItemsWrapper } from './style';
import {
  DeleteOutlined,
  CheckOutlined,
  CloseOutlined,
  DragOutlined,
  FormOutlined
} from '@ant-design/icons';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import {
  getDeleteAction,
  getisCompleteAction,
  getEditAction
} from '../../store/actionCreators';

const { Text } = Typography;

function TodoItem({ isComplete, id, content }) {
  // redux hook
  const { todolist } = useSelector(
    (store) => ({
      todolist: store.todolist
    }),
    shallowEqual
  );
  const dispatch = useDispatch();

  // oter hooks
  const [isShow, setIsShow] = useState(false);
  const [editVal, seteditVal] = useState(content);
  

  // function 方法
  // 删除的方法
  function handleDelete() {
    let newArr = todolist.filter((v) => v.id !== id);
    dispatch(getDeleteAction(newArr));
    message.success('删除成功');
  }
  // 修改状态的方法
  function handleIsComplete(id) {
    let newArr = todolist.map((v) => {
      const obj = v;
      if (v.id === id) {
        obj['isComplete'] = !obj['isComplete'];
        return obj;
      }
      return obj;
    });

    message.success(
      `${newArr.filter((v) => v.id === id)[0].isComplete ? '已完成' : '已取消'}`
    );
    dispatch(getisCompleteAction(newArr));
  }
  // 提交修改的方法
  function handleEditChange() {
    if (!isShow) {
      setIsShow(!isShow);
    }else{
      if (!editVal.trim()) {
        message.error('修改的值不能为空');
        return
      }
      let newVal = todolist.map((v) => {
        const obj = v;
        if (v.id === id) {
          obj['content'] = editVal
          return obj;
        }
        return obj;
      });

      dispatch(getEditAction(newVal))
      setIsShow(!isShow);
      message.success('修改成功')
    }
  }

  return (
    <ToDuItemsWrapper
      onDoubleClick={() => console.log(id)}
      style={{ cursor: 'pointer' }}
    >
      <div className="item-container">
        <div style={{display:'flex',alignItems:'center'}}>
          <DragOutlined className="dragging" style={{ color: '#ccc',fontSize:'20px' }} />
          {isShow ? (
            <Input
              placeholder="请输入你想修改的值"
              value={editVal}
              style={{ width: '400px' }}
              onChange={(e) => seteditVal(e.target.value.trim())}
            />
          ) : (
            <Text delete={isComplete} style={{userSelect:'none'}}>{content}</Text>
          )}
        </div>
        <div className="btn_box">
          <Button
            type="primary"
            icon={<FormOutlined />}
            onClick={(e) => handleEditChange()}
            ghost
          >
            {isShow ? '提交' : '修改'}
          </Button>

          <Button
            type="primary"
            icon={isComplete ? <CloseOutlined /> : <CheckOutlined />}
            onClick={() => handleIsComplete(id)}
          >
            {isComplete ? '取消' : '完成'}
          </Button>

          <Popconfirm
            title="你是否需要删除这一项?"
            onConfirm={handleDelete}
            okText="是的"
            cancelText="取消"
          >
            <Button type="primary" icon={<DeleteOutlined />} danger></Button>
          </Popconfirm>
        </div>
      </div>
    </ToDuItemsWrapper>
  );
}

export default TodoItem;
